/*
 * @Author: yangrongxin
 * @Date: 2021-08-16 14:12:18
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:28:36
 */
import { useState, useRef } from 'react';
import { View, Text, Button } from '@tarojs/components';
import { AtTabs, AtTabsPane, AtIcon, AtSwipeAction } from 'taro-ui';
import RenderItemComponent from '@/pages/PatientEducation/components/RenderItemComponent';
import EvaluationItem from '@/pages/Evaluation/components/EvaluationItem/index';
import ModalWapper from '@/components/CustomModal/modalWapper';
import { ScrollContent } from '@/components/index';
import { useSafeArea } from '@/hooks/index';
import Taro from '@tarojs/taro';
import { getFavoriteList, clearFavorite, deleteFavorite, getArticleFavoriteList } from './service';
import styles from './index.module.less';

const SwiperWapperHoc = (Component: any, extendProps: any) => {
  const [, , info] = useSafeArea();
  const { screenWidth } = info;
  return function (props: any) {
    const { articleReload, testReload, ...otherProps } = extendProps;

    // 取消当前的收藏
    const removeFavorite = () => {
      deleteFavorite({
        objectIds: [props.articleId ? props.articleId : props.measureTableId],
        type: props.articleId ? 2 : 1,
      }).then((res: any) => {
        Taro.showToast({
          title: '取消收藏成功！',
          icon: 'none',
        });
        if (props.articleId) {
          articleReload({});
        } else {
          testReload({});
        }
      });
    };

    return (
      <AtSwipeAction
        maxDistance={100} // 一个按钮是100px 两个按钮 所以计算200 根据 展示的按钮个数*当前每个按钮的宽度
        areaWidth={screenWidth}
        options={[
          {
            text: '',
            className: `${styles.swiperActionItem} icon icon-ashbin`,
            style: {
              color: '#000',
              backgroundColor: '#f7d314',
            },
          },
        ]}
        onClick={removeFavorite}
      >
        <Component {...props} {...otherProps} />
      </AtSwipeAction>
    );
  };
};

const MyFavorite = () => {
  const tabList = [
    {
      title: '宣教',
    },
    {
      title: '量表',
    },
  ];

  const [current, setCurrent] = useState(0);
  const [isOpened, setIsOpened] = useState<boolean>(false);
  const [hasData, setHasData] = useState({
    0: false,
    1: false,
  });
  const articleRef = useRef<any>();
  const testRef = useRef<any>();

  /* 展示确认弹窗 */
  const showConfirmModal = () => setIsOpened(true);

  const articleReload = (param: any) => articleRef?.current?.reload(param);
  const testReload = (param: any) => testRef?.current?.reload(param);

  const clearAllFavorite = () => {
    clearFavorite({
      type: current === 0 ? 2 : 1,
    }).then((res: any) => {
      if (current === 0) {
        articleReload({});
      } else {
        testReload({});
      }
      Taro.showToast({
        title: '清除成功',
        icon: 'none',
      });
      setIsOpened(false);
    });
  };

  return (
    <View className={`hxtPublicWapper ${styles.tabWapperContainer}`}>
      {/* 进行清空的按钮 */}
      {hasData[current] && (
        <View className={styles.clearAllBtn} onClick={showConfirmModal}>
          <AtIcon value="trash" size="14" />
          <Text>清空</Text>
        </View>
      )}
      <AtTabs current={current} swipeable={false} tabList={tabList} onClick={(value) => setCurrent(value)}>
        <AtTabsPane current={current} index={0}>
          <ScrollContent
            ref={articleRef}
            onLoadWhenShow
            request={async (data) => {
              return getArticleFavoriteList(data);
              // return [];
            }}
            extendScrollContentWapper={styles.extendScrollContentWapper}
            extendScrollContent={styles.extendScrollContent}
            params={{}}
            itemProps={{
              extendWapperClass: styles.articleWapperClass,
            }}
            ScrollItem={SwiperWapperHoc(RenderItemComponent, {
              isHomeScroll: true,
              articleReload,
              testReload,
            })}
            onDataFetch={({ content }) => setHasData({ ...hasData, 0: content.length !== 0 })}
          />
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          <ScrollContent
            ref={testRef}
            onLoadWhenShow
            request={async (data) => getFavoriteList(data)}
            extendScrollContentWapper={styles.extendScrollContentWapper}
            extendScrollContent={styles.extendScrollContent}
            params={{}}
            itemProps={{
              extendWapperClass: styles.evaluationItemWapper,
            }}
            ScrollItem={SwiperWapperHoc(EvaluationItem, {
              articleReload,
              testReload,
            })}
            onDataFetch={({ content }) => setHasData({ ...hasData, 1: content.length !== 0 })}
          />
        </AtTabsPane>
      </AtTabs>
      {/* 存放提示使用的弹窗 */}
      <ModalWapper
        isOpened={isOpened}
        canClose={false}
        onClose={() => setIsOpened(false)}
        ContentChildren={
          <View className={styles.infoHeader}>
            <Text>提示</Text>
            <Text>是否清空量表列表内容？</Text>
          </View>
        }
        btnGroup={
          <View className={styles.infoFooter}>
            <Button onClick={() => setIsOpened(false)}>否</Button>
            <Button onClick={clearAllFavorite}>是</Button>
          </View>
        }
      />
    </View>
  );
};

export default MyFavorite;
